<!--
 * @Description: 
 * @Author: 胡涛
 * @Date: 2023-09-11 23:07:50
 * @LastEditors: 胡涛
 * @LastEditTime: 2024-01-06 20:23:29
-->
<template>
  <a-modal
    :open="visible"
    :keyboard="false"
    :maskClosable="false"
    :title="title"
    @cancel="onCancel"
    @ok="onSubmit"
    :confirmLoading="submitLoading"
    :width="800"
  >
    <a-form ref="formRef" v-bind="formLayout" :model="model" :rules="rules">
      <a-tabs>
        <a-tab-pane key="info" tab="基本信息">
          <a-form-item label="字典编码">
            <a-input v-model:value="model.code" :disabled="isEdit"></a-input>
          </a-form-item>
          <a-form-item label="字典名称">
            <a-input v-model:value="model.name"></a-input>
          </a-form-item>
          <a-form-item label="启用状态">
            <a-switch v-model:checked="model.status"> </a-switch>
          </a-form-item>
          <a-form-item label="字典描述">
            <a-input v-model:value="model.description"></a-input>
          </a-form-item>
        </a-tab-pane>
        <a-tab-pane key="items" tab="字典项配置">
          <a-row class="row row-header">
            <a-col class="cell" :span="4">绑定值</a-col>
            <a-col class="cell" :span="6">显示名</a-col>
            <a-col class="cell" :span="3">扩展值1</a-col>
            <a-col class="cell" :span="3">扩展值2</a-col>
            <a-col class="cell" :span="6">描述</a-col>
            <a-col class="cell" :span="2">&nbsp;</a-col>
          </a-row>
          <a-row class="row" v-for="(item, index) in model.items" :key="index">
            <a-col class="cell" :span="4">
              <a-input size="small" v-model:value="item.value"></a-input>
            </a-col>
            <a-col class="cell" :span="6">
              <a-input size="small" v-model:value="item.name"></a-input>
            </a-col>

            <a-col class="cell" :span="3">
              <a-input
                size="small"
                v-model:value="item.extraProperties.value1"
              ></a-input>
            </a-col>
            <a-col class="cell" :span="3">
              <a-input
                size="small"
                v-model:value="item.extraProperties.value2"
              ></a-input>
            </a-col>
            <a-col class="cell" :span="6">
              <a-input size="small" v-model:value="item.description"></a-input>
            </a-col>
            <a-col class="cell" :span="2">
              <a-button
                size="small"
                danger
                ghost
                @click="model.items.splice(index, 1)"
                >删除</a-button
              >
            </a-col>
          </a-row>
          <div class="row-footer">
            <a-button
              type="primary"
              size="small"
              @click="
                model.items.push({
                  name: '',
                  value: '',
                  extraProperties: {
                    value1: '',
                    value2: '',
                  },
                } as any)
              "
              >添加项</a-button
            >
          </div>
        </a-tab-pane>
      </a-tabs>
    </a-form>
  </a-modal>
</template>

<script lang="ts" setup>
import { DictionaryItemDto } from "@/api/system/types";
import { useFormPage } from "@/helpers/pages";
import { FormInstance } from "ant-design-vue";
import { computed, onMounted, ref, watch } from "vue";
import api from "@/api/system/dictonary";
const formRef = ref<FormInstance>();
const emits = defineEmits(["update:visible", "close", "success"]);
const props = defineProps({
  id: String,
  visible: { type: Boolean, default: false },
  action: {
    type: String,
    default: "create",
  },
  item: {
    type: Object,
    default() {
      return {};
    },
  },
});

const { model, rules, formLayout, loading, submitLoading } = useFormPage<
  DictionaryItemDto,
  string
>({
  model: {
    moduleCode: "Platform",
    code: "",
    name: "",
    icon: "",
    status: true,
    sortIndex: 0,
    items: [],
  },
});

const isEdit = computed(() => {
  return props.action === "edit";
});

/**
 * 弹窗标题
 */
const title = computed(() => {
  return isEdit.value ? "修改用户信息" : "添加用户信息";
});

/**
 * 加载数据
 */
const loadData = () => {
  if (isEdit.value) {
    loading.value = true;
    api.get(props.id).then((res) => {
      Object.assign(model, res);
      loading.value = false;
    });
  }
};

/**
 * 提交
 */
const onSubmit = () => {
  emits("success");
  formRef.value.validate().then(() => {
    let request = isEdit.value
      ? api.update(props.id, model)
      : api.create(model);
    submitLoading.value = true;
    request
      .then((res) => {
        emits("success", res);
        emits("update:visible", false);
        emits("close");
      })
      .finally(() => {
        submitLoading.value = false;
      });
  });
};

/**
 * 取消
 */
const onCancel = () => {
  emits("update:visible", false);
  emits("close");
};

watch(
  () => props.visible,
  (val: boolean) => {
    console.log("visible changed,val,", val);
    val && loadData();
  },
  { immediate: true }
);
</script>

<style lang="less" scoped>
.row {
  .cell {
    padding: 5px 8px;
  }

  &-header {
    background: rgba(0, 0, 0, 0.05);
    border-bottom: 1px solid #eee;
    .cell {
      font-weight: bold;
    }
  }

  &-footer {
    padding: 5px 8px;
  }
}
</style>
